<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Add a GeoJSON line</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
    let coordinates = [[13.404954,52.520007],[-0.127758,51.507351],[37.6173,55.755826],[-122.419416,37.774929],[121.473701,31.230416]]
 let center = coordinates[0]

      mapboxgl.accessToken =
        'pk.eyJ1IjoibWF0dHpob3UiLCJhIjoiY2tucGhnNmx0MDI1ZDJvcW9kaGRjc3pmOSJ9.E-5WVYFnmqA4BpUe_DJisQ'

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center,
        zoom: 15,
      })

      map.on('load', function () {
        map.addSource('route', {
          type: 'geojson',
          data: {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates,
            },
          },
        })
        map.addLayer({
          id: 'route',
          type: 'line',
          source: 'route',
          layout: {
            'line-join': 'round',
            'line-cap': 'round',
          },
          paint: {
            'line-color': '#888',
            'line-width': 8,
          },
        })
      })
    </script>
  </body>
</html>
